{% extends 'content_base.html' %}

{% block body_parameters %} ex:ondataload="onDataLoad" {% endblock %} 

{% block preJQuery %}
<link rel='stylesheet' href='/media/top_button.css' type='text/css' />
<link type="text/css" href="/media/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<link rel="exhibit/data" type="application/jsonp" href="https://spreadsheets0.google.com/feeds/list/0AnEtH40HxJqMdFh4UTJWSzRpT1A4eDRQNVNwRFhPZHc/od6/public/basic?alt=json-in-script" ex:converter="googleSpreadsheets" />
<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" type="text/javascript"></script>
{% endblock %}

{% block postJQuery %}
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.jscrollpane.min.js"></script>
{% endblock %}

{% block scriptJS %}
<script type="text/javascript">	
function refresh() {
	$("article[className='hentry']").addClass("hentry");
	$("div[className='entry-title']").addClass("entry-title");
	$("div[className='item-header']").addClass("item-header");
	$("div[className='content']").addClass("content");
	$("div[className='entry-content']").addClass("entry-content");
	$("footer[className='post-info']").addClass("post-info");
	
	$('.quisom .content').jScrollPane({showArrows: true,arrowScrollOnHover: true});
	$('.exhibit-facet-body').jScrollPane({showArrows: true,arrowScrollOnHover: true});
};

function onDataLoad() {
	window.exhibit = Exhibit.create();
    window.exhibit.configureFromDOM();
	
	var _historyListener = {
        //onBeforePerform:       - function(action) { alert('beforePerform') },
        onAfterPerform: function(action) { refresh() },
    };
	window.simile = SimileAjax;
    window.simile.History.addListener(_historyListener); 
	refresh();	
}
</script>
{% endblock %}

{% block top_nav %}
<div class="container_24">
    <ul class="grid_11 top_nav_buttons">
        <li>
            <a class="awesome" href="/algos/sobrealgos">
                <div class="top_nav_button">
                    <img height="64" width="64" src="/media/pics/info64.png"><span>Sobre Algos</span>
                </div>
            </a>
        </li>
        <li>
            <a class="current awesome" href="/algos/quisom">
                <div class="top_nav_button">
                    <img height="64" width="64" src="/media/pics/photo-camera64.png"><span>Qui som</span>
                </div>
            </a>
        </li>
        <li>
            <a class="awesome" href="/algos/contactar">
                <div class="top_nav_button">
                    <img height="64" width="64" src="/media/pics/comment64.png"><span>Contactar</span>
                </div>
            </a>
        </li>
    </ul>
	<div class="facets prefix_5 grid_5">
		<div ex:role="facet" ex:expression=".role" ex:facetLabel="Cercar per rols"  ex:height="55px" ex:scroll="true" ></div>
	</div>
	
    <a class="awesome" style="float:right;" href="/home">
        <div class="top_nav_button">
            <img height="64" width="64" src="/media/pics/home64.png"><span>Inici</span>
        </div>
    </a>
    <div class="clear">
    </div>
</div>
{% endblock %}

{% block content_base %}
<div class="container_24">
	<div class="grid_24">
	    <div class="quisom" style="display:none;" ex:role="view" ex:showToolbox="false" ex:viewClass="Thumbnail" ex:showHeader="false">
 			<div ex:role="lens" >
					<article class="hentry">
						<header>
							<div class="entry-title">
								<div class="item-header">
									<span ex:content=".label"></span> <br>
									<a ex:href-subcontent="mailto:{{.email}}" ex:content=".email"></a> <br>
									<span ex:content=".telephone"></span>
								</div>
							</div>
						</header>
						<div class="content" class="scroll-pane">
							<div class="entry-content">
								<img ex:src-content=".url_photo"></img>
								<p><span ex:content=".shortbio"></span></p>
							</div>
						</div>
						<footer class="post-info">
							<span ex:content=".role"></span>
						</footer>
					</article>
			</div>
 		</div>
	</div>
	
	<div class="clear:both"></div>
</div>


{% endblock %}